<template>
  <div class="container">
    <!-- 跳蚤市场订单列表-->
    <div class="bgbox"
         v-if="isbg">
      <img src="https://img.ameimeika.com/h5_images/mp_images/3.3/bg1.png"
           alt
           class="nothing">
           <!-- https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/3.3/bg1.png -->
      <div class="text">你还没有相关订单哦</div>
    </div>
    <scroll-div :scroll-y="true"
                :style="{'height': '100%'}"
                @scroll="scroll"
                @scrolltolower="pullrefresh"
                class="scroll_div">
       <orderList :goods_info="goods_info"></orderList>
    </scroll-div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import orderList from "@/components/card_ticket_order/list";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      pageNum: 1,
      isbottom: false,
      order_scene:2,   //1卡券商城  2跳蚤市场
      order_status:0 , //0全部  1待支付 2定金支付 3待退款 4已取消 5已完成
      goods_info:[],
      pageSize:10,
      isbg:false
    };
  },
  components: {
    orderList
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "订单记录"
    });
    this.isbg = false;
    this.pageNum = 1;
    this.getData();
  },
  methods: {
    getData () {
      if (this.isbottom) {
        return false;
      }
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/v4_5/market_order/orderList",
        {
          order_scene: this.order_scene,
          order_status:this.order_status,
          page:this.pageNum,
          pageSize:this.pageSize
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
           
            if (res.data.length == 0 && this.pageNum > 1) {
              wx.showToast({
                title: "已经到最底下了",
                icon: "none",
                duration: 1000,
                mask: true
              });
              this.isbottom = true;
               this.isbg = false
              return false;
            } else if (res.data.length == 0 && this.pageNum == 1) {
              //没有订单
              this.isbg = true
              return;
              
            } else if (res.data.length > 0 && this.pageNum == 1) {
              this.goods_info = [];
              this.goods_info = res.data;
               this.isbg = false
            } else if (res.data.length > 0 && this.pageNum > 1) {
              this.goods_info.push(...res.data);
               this.isbg = false
            }
            this.goods_info.forEach(element => {
               element.ordercreate_time = new Date(element.order_create_time * 1000).Format(
                "hh:mm dd/MM "
              );
            });
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        });
    },
    pullrefresh () {
      this.pageNum++;
      this.getData(this.pageNum);
    },
   
    
  },


  onShow () {
    this.getData()
   }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #F7F7F7;
  overflow: hidden;
}

.dv {
  width: 100%;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  color: #666;
  background: #fff;
  display: flex;
  justify-content:space-between;
  padding: 11px 17px;
}
.dv_item {
  width: auto;
  height: 30px;
  box-sizing: border-box;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 30px;
  // margin-right: 10px;
  float: left;
}
.active {
  color: #3EB0A9;
}
.list {
  width: 100%;
  height: 100%;
  /* padding:0 15px; */
  box-sizing: border-box;
  background: #fff;
  // padding: 0 15px;
}
.list_li {
  height: 59px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #f3f4f6;
}
.title {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 20px;
}
.time {
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  line-height: 17px;
}
.amount {
  height: 24px;
  font-size: 17px;
  font-weight: 500;
  color: #333;
  line-height: 24px;
  position: absolute;
  right: 31px;
  top: 18.5%;
}
.icon {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 27%;
  right: 15px;
}
.tip {
  font-size: 10px;
  color: #666;
  line-height: 14px;
  position: absolute;
  right: 0;
  top: 48%;
}
.red {
  color: #ff383e;
}
.bgbox {
  width: 100%;
  height: 100%;
  padding: 90px 0;
  box-sizing: border-box;
  .nothing {
    width: 128px;
    height: 114px;
    margin: 0 auto;
    display: block;
  }
  .text {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    margin-top: 13px;
    color: rgba(153, 153, 153, 1);
    text-align: center;
  }
}
</style>

